<template>
  <div>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item label="财务经办人" prop="rechargeHandlerId">
        <div style="display: flex; flex-direction: row; align-items: center">
          <el-select
            v-model="formData.rechargeHandlerId"
            clearable
            style="width: 280px; margin-right: 20px"
          >
            <el-option
              v-for="item in handlerList"
              :key="item.id"
              :value="item.id"
              :label="item.realName"
            >
            </el-option>
          </el-select>
          <el-button @click="showAddDialog" type="primary"
            >添加经办人</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="充值金额" prop="remitPrice">
        <div>
          <div style="display: flex; flex-direction: row; align-items: center">
            <el-input-number
              v-model="formData.remitPrice"
              placeholder="请输入汇款金额"
              style="width: 280px; margin-right: 20px"
              :precision="2"
              clearable
            />
            <div style="font-size: 14px; color: #c0c4cc">
              {{
                selectDictLabel(bus_currency_type, props.userInfo.currencyType)
              }}
            </div>
            <!-- <el-select
              v-model="formData.currencyType"
              clearable
              style="width: 140px; margin-right: 20px"
              placeholder="请选择汇款币种"
            >
              <el-option
                v-for="item in bus_currency_type"
                :key="item.value"
                :value="item.value"
                :label="`${item.label}`"
              >
              </el-option>
            </el-select> -->
          </div>
          <div style="font-size: 12px; color: #f69c29">
            最低起充{{ min
            }}{{
              selectDictLabel(bus_currency_type, props.userInfo.currencyType)
            }}
          </div>
          <div style="font-size: 12px; color: #f69c29">
            最高充值金额{{ max
            }}{{
              selectDictLabel(bus_currency_type, props.userInfo.currencyType)
            }}
          </div>
          <!-- <div>折合人民币：</div> -->
        </div>
      </el-form-item>
      <div class="money-wrap">
        <div class="trans-money">
          <div>转账金额(￥)</div>
          <div class="money-text">{{ formatMoney(money) }}</div>
        </div>
        <div class="plus">+</div>
        <div class="trans-money">
          <div>手续费(￥)</div>
          <div class="money-text">{{ fee }}</div>
        </div>
        <div class="plus">=</div>
        <div class="trans-money">
          <div>实付金额(￥)</div>
          <div class="money-text">{{ formatMoney(totalMoney) }}</div>
        </div>
      </div>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">确认付款</el-button>
      </el-form-item>
    </el-form>
    <addHandlerDialog
      v-model:value="addVisible"
      id=""
      v-if="addVisible"
      @on-success="getHandlerList"
    ></addHandlerDialog>
    <rechargeMethodDialog
      v-model:value="rechargeMethodVisible"
      :payUrl="payUrl"
      v-if="rechargeMethodVisible"
    ></rechargeMethodDialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, watch } from "vue";
import addHandlerDialog from "./add-handler-dialog.vue";
import rechargeMethodDialog from "./recharge-method-dialog.vue";
import {
  foreignCalculate,
  getServiceFee,
  doAggPayment,
} from "@/api/customer_handle/index.js";

import { getCustomerRechargeHandlerList } from "@/api/customer_handle/index.js";
import { selectDictLabel, formatMoney } from "@/utils/ruoyi.js";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const { bus_currency_type } = proxy.useDict("bus_currency_type");
const min = ref(200);
const max = ref(3000);

const handlerList = ref([]);
const addVisible = ref(false);
const rechargeMethodVisible = ref(false);
const payUrl = ref("");

const loading = ref(false);
const formRef = ref();
const formData = reactive({
  rechargeHandlerId: "",
  currencyType: "0",
  remitPrice: 0,
  remark: "",
});

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const payParams = ref({});

const formRules = reactive({
  rechargeHandlerId: [
    { required: true, message: "请选择经办人", trigger: "blur" },
  ],
  remitPrice: [
    { required: true, message: "请输入汇款金额", trigger: "blur" },
    // {
    //   min: min.value,
    //   max: max.value,
    //   message: `最低充值${min.value}，最高充值${max.value}`,
    //   trigger: "blur",
    // },
  ],
});

const fee = ref(0);
const money = ref(0);
const totalMoney = ref(0);

function showAddDialog() {
  addVisible.value = true;
}
function getHandlerList() {
  getCustomerRechargeHandlerList({ pageNum: 1, pageSize: 1000 }).then((res) => {
    handlerList.value = res.rows;
  });
}

const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();

    loading.value = true;
    const params = {
      remitPrice: formData.remitPrice,
      currencyType: "1",
      rechargePrice: money.value,
      rechargeHandlerId: formData.rechargeHandlerId,
      remark: formData.remark,
      pageUrl: window.location.origin + "/payResult",
    };

    const { data } = await doAggPayment(params);
    payUrl.value = data.url;
    loading.value = false;
    rechargeMethodVisible.value = true;
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

function getMoney() {
  foreignCalculate({
    localCurrencyType: "1",
    paymentPrice: formData.remitPrice,
  }).then((res) => {
    money.value = res.data.price;
    totalMoney.value = money.value + fee.value;
  });
}
function getFee() {
  getServiceFee({ paymentPrice: formData.remitPrice }).then((res) => {
    fee.value = res.data.servicePrcie;
    getMoney();
  });
}

onMounted(() => {
  getHandlerList();
  // getFee();
});

watch(
  () => formData.remitPrice,
  (val) => {
    if (val) {
      getFee();
    }
  }
);
</script>

<style lang="scss" scoped>
.money-wrap {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  align-items: center;
  font-size: 14px;
  color: #333;
  .money-text {
    background-color: #f0f0f0;
    padding: 8px 15px;
    margin-top: 3px;
    font-size: 16px;
  }
  .plus {
    margin: 0 50px;
    font-size: 24px;
  }
}
</style>
